<template>
  <el-dialog v-dialog-drag append-to-body :close-on-click-modal="false" width="800px" :visible.sync="visible"
    :before-close="beforeClose" :title="title">
    <div class="wrapper">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="移交人" prop="removeUserName">
          <el-select v-model="form.removeUserName" placeholder="请选择移交人" :disabled="operateType == 'view'">
            <el-option v-for="item in removeUserNameOptions" :key="item.userId" :label="item.nickName"
              :value="item.userId">
              <div style="line-height: 20px;">
                {{ item.nickName }}({{ item.deptName }})
              </div>
              <div style="line-height: 20px;">
                电话号码:{{ item.userPhone }}({{ item.projectLevel }})
              </div>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="submit" v-if="operateType != 'view'">确定</el-button>
      <el-button size="mini" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { doOver, handOverList } from "../api";
export default {
  name: "OverDialog",
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: "任务移交"
    },
    data: {
      type: Object,
      default: () => { }
    },
    operateType: {
      type: String,
      default: "over"
    },
  },
  data() {
    return {
      projectId: this.$store.state.app.selectData,
      removeUserNameOptions: [],
      form: {
        recordId: "",
        removeUserName: "",
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.form.recordId = this.data.id;
      handOverList({ projectId: this.projectId }).then((data) => {
        this.removeUserNameOptions = data.data;
      });
    },
    beforeClose() {
      this.$emit('update:visible', false);
    },
    async submit() {
      const res1 = await this.$refs.form.validate()
      if (!res1) {
        return;
      }
      const res = await doOver({ ...this.form, projectId: this.projectId, operateType: "3" })
      if (res.code == 200) {
        this.$emit("refresh")
        this.beforeClose()
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
  height: 40px !important;
}

.wrapper {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;

  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>
